<template>
  <div class="mv">
    <div class="mv-top" @click="router.back()">
      <svg t=" 1650268048399" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="2587" width="16" height="16">
        <path
          d="M862.485 481.154H234.126l203.3-203.3c12.497-12.497 12.497-32.758 0-45.255s-32.758-12.497-45.255 0L135.397 489.373c-12.497 12.497-12.497 32.758 0 45.254l256.774 256.775c6.249 6.248 14.438 9.372 22.627 9.372s16.379-3.124 22.627-9.372c12.497-12.497 12.497-32.759 0-45.255l-203.3-203.301h628.36c17.036 0 30.846-13.81 30.846-30.846s-13.81-30.846-30.846-30.846z"
          fill="" p-id="2588"></path>
      </svg>
      <div class="title">

        <div>{{ mvDetail.name }}</div>

      </div>
    </div>
    <!-- <videoPlay v-bind="options" poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg" /> -->
    <div class="video">
      <video ref="video" :src="mvSrc" controls autoplay></video>
    </div>

    <div class="content">
      <div @click="clickToChangeModule(1)" class="topdiv" :class="{ 'active': showModule }"> {{ $t('mv.jianjie') }}
      </div>
      <div class="pl topdiv " @click="clickToChangeModule(2)" :class="{ 'active': !showModule }">{{ $t('mv.comment') }}
      </div>
      <div>
        <marquee class="pmd" scrollamount=2 behavior="scroll" direction="left">
          <svg t="1650284841855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="3098" width="5" height="5">
            <path
              d="M959.112154 768.5664 959.112154 122.946147c0-32.921807-26.784016-59.705823-59.706847-59.705823L329.374636 63.240323c-32.921807 0-59.706847 26.784016-59.706847 59.705823l0 590.643128c-20.75265-13.34289-45.429679-21.090341-71.882144-21.090341-73.490781 0-133.280516 59.789735-133.280516 133.280516s59.789735 133.280516 133.280516 133.280516c73.490781 0 133.280516-59.789735 133.280516-133.280516L331.066161 124.638695l566.646598 0 0 535.664979c-20.739347-13.31833-45.39284-21.048385-71.818699-21.048385-73.490781 0-133.280516 59.789735-133.280516 133.280516s59.789735 133.280516 133.280516 133.280516 133.280516-59.789735 133.280516-133.280516C959.175599 771.207553 959.150016 769.885442 959.112154 768.5664zM197.785645 897.661593c-39.635719 0-71.882144-32.246425-71.882144-71.882144s32.246425-71.882144 71.882144-71.882144c39.635719 0 71.882144 32.246425 71.882144 71.882144S237.422388 897.661593 197.785645 897.661593zM825.895083 844.417949c-39.635719 0-71.882144-32.246425-71.882144-71.882144s32.246425-71.882144 71.882144-71.882144c38.790468 0 70.483284 30.889521 71.818699 69.360717l0 2.521426c0 0.423649 0.01535 0.843204 0.031722 1.26276C897.067053 812.852022 865.108177 844.417949 825.895083 844.417949z"
              p-id="3099"></path>
          </svg> {{ mvDetail.artistName }}-{{ mvDetail.name }}
        </marquee>
      </div>

      <!-- <marquee v-if="singlesong" scrollamount=2 behavior="scroll" direction="left">
            {{ singlesong.name }}
          </marquee> -->
    </div>
    <!-- 左边模块 -->
    <div class="left" v-show="showModule">
      <div class="info">
        <div class="title">
          <div class="songname">{{ mvDetail.name }}</div>
          <svg @click="showIntroduce = !showIntroduce" v-if="showIntroduce" t="1650285480560" class="icon"
            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6088" width="16" height="16">
            <path d="M28.16 315.93472 512.00512 865.28 995.84 315.93472 28.16 315.93472Z" p-id="6089"></path>
          </svg>
          <svg @click="showIntroduce = !showIntroduce" v-else t="1650285905000" class="icon" viewBox="0 0 1024 1024"
            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6897" width="16" height="16">
            <path
              d="M946.33106 697.353498 541.30749 284.093337c-15.690354-16.009625-41.469484-16.009625-57.160861 0l-405.024593 413.260162c-24.819269 25.323758-6.877641 68.028373 28.579919 68.028373l810.048163 0C953.209724 765.381871 971.150328 722.677257 946.33106 697.353498z"
              p-id="6898"></path>
          </svg>
        </div>
        <div class="jieshao" v-if="!showIntroduce">
          {{ mvDetail.desc }}
        </div>

      </div>
      <div class="nav">
        <div class="shoucang"><svg t="1650286781149" class="icon" viewBox="0 0 1027 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="16454" width="16" height="16">
            <path
              d="M1018.06317 383.1148a97.161305 97.161305 0 0 0-78.700657-66.555494l-233.187133-35.463877-104.448403-222.013582a97.161305 97.161305 0 0 0-178.776802 0L318.987578 281.095429l-233.187133 35.463877A97.161305 97.161305 0 0 0 29.932695 483.190944l171.489704 175.861963-40.321942 248.247135a97.161305 97.161305 0 0 0 97.161305 114.65034 97.161305 97.161305 0 0 0 48.580653-12.630969l205.981967-113.678728 205.981967 114.164534a97.161305 97.161305 0 0 0 145.741958-102.505177l-40.321941-248.247135 171.003897-175.861963a97.161305 97.161305 0 0 0 22.832907-100.076144z"
              fill="#5E5C5C" p-id="16455"></path>
          </svg>
          <div class="num">{{ mvDetail.subCount }}</div>
        </div>
        <div class="share"><svg t="1650286350217" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="8380" width="16" height="16">
            <path
              d="M71.9 909.8c-2.2 8.4-12.5 5.9-11.9-2.9 13.1-187 71.1-284.1 128.1-352.8C274.7 449.9 469.8 352.7 604 341.3c10.6-0.9 18.9-11.7 18.9-24.8V157.9c0-21.7 21.1-32.9 34.1-18.2l299.5 339.5c9 10.2 8.6 27.6-0.8 37.2L662 817.6c-13.2 13.5-33.3 2-33.3-19V604.3c0-12.9-8.1-23.7-18.6-24.7-85.7-8.5-287.5 10.3-369.1 70.2-34.8 25.4-129.8 112.4-169.1 260z"
              p-id="8381"></path>
          </svg>
          <div class="num">{{ mvDetail.shareCount }}</div>
        </div>
        <div class="comment"><svg t="1650286437658" class="icon" viewBox="0 0 1212 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="12715" width="16" height="16">
            <path
              d="M165.266759 826.333795l155.185487 180.416212c19.832011 23.082257 52.554829 22.861902 72.552107 0L550.889196 826.333795l605.812849 0C1187.221307 826.333795 1211.956232 801.59887 1211.956232 770.859253L1211.956232 55.529631C1211.956232 24.845103 1187.772197 0 1156.757135 0L55.199097 0C24.734925 0 0 24.734925 0 55.529631l0 715.329622C0 801.488692 24.404391 826.333795 55.033831 826.333795L165.266759 826.333795zM220.355679 232.585419C220.355679 225.864571 225.809482 220.355679 232.475241 220.355679l691.916831 0C931.168009 220.355679 936.511634 225.809482 936.511634 232.585419l0 30.629439C936.511634 269.935706 931.057831 275.444598 924.392072 275.444598L232.475241 275.444598C225.699304 275.444598 220.355679 269.990795 220.355679 263.214858L220.355679 232.585419zM220.355679 397.852178C220.355679 391.13133 225.809482 385.622438 232.475241 385.622438l691.916831 0C931.168009 385.622438 936.511634 391.076241 936.511634 397.852178l0 30.629439C936.511634 435.202465 931.057831 440.711357 924.392072 440.711357L232.475241 440.711357C225.699304 440.711357 220.355679 435.257554 220.355679 428.481617L220.355679 397.852178zM220.355679 563.118937C220.355679 556.398088 225.534037 550.889196 231.869263 550.889196l472.773108 0C710.922508 550.889196 716.155955 556.343 716.155955 563.118937l0 30.629439C716.155955 600.469224 710.977597 605.978116 704.642371 605.978116L231.869263 605.978116C225.589126 605.978116 220.355679 600.524313 220.355679 593.748376L220.355679 563.118937z"
              p-id="12716"></path>
          </svg>
          <div class="num">{{ mvDetail.shareCount }}</div>
        </div>

      </div>
      <!-- 相似mv -->
      <div class="similarMvs">
        <div class="item" @click="updateMv(item.id)" v-for="(item, index) in similarMvs" :key="index">
          <img :src="item.cover">
          <div class="info">
            <div class="title">{{ item.name }}</div>
            <div class="artist"> {{ item.artistName }}</div>
            <div class="playCount">{{ toFixed(item.playCount) }}播放</div>
          </div>
        </div>
      </div>
      <!-- 相似mv -->
    </div>
    <!-- 左边模块 -->
    <!-- 右边模块 -->
    <div class="right" v-show="!showModule">
      <div class="comment">评论区</div>
      <div class="list">
        <div class="item" v-for="(item, index) in mvComment" :key="index">
          <img :src="item.user.avatarUrl" alt="">
          <div class="item-right">
            <div class="name">{{ item.user.nickname }}</div>
            <div class="time">{{ item.timeStr }}</div>
            <div class="content">{{ item.content }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边模块 -->
  </div>

</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from 'vue-router'
import { search } from '@/store/search.js'
import { storeToRefs } from 'pinia'
const searchStore = search()
const { mvSrc, mvDetail, similarMvs, mvComment } = storeToRefs(searchStore)
// 展开接受
let showIntroduce = ref(true)
// 获取mvsrc
searchStore.asyncgetMvSrc(useRoute().params.mvid)
// 获取mv详情
searchStore.asyncgetMvDetail(useRoute().params.mvid)
// 获取相似mv
searchStore.asyncgetSimilarMv(useRoute().params.mvid)
// 获取mv评论
searchStore.asyncgetMvComemnt(useRoute().params.mvid)
// 切换显示评论开关
let showModule = ref(true)
// 切换显示评论动作
let clickToChangeModule = (type) => {
  if (type == 1) {
    showModule.value = true
  } else {
    showModule.value = false
  }
}
let router = useRouter()
// 获取视频组件,视频播放音乐不可播放
// let video = ref(null)
// console.log(video);
// 过滤
let toFixed = (num) => {
  if (num > 10000)
    return (num / 1000).toFixed(1) + '万'
  else
    return num
}
//点击更换mv
let updateMv = (id) => {
  searchStore.asyncgetMvSrc(id)
  searchStore.asyncgetMvDetail(id)
  showIntroduce.value = true
  // 获取相似mv
  searchStore.asyncgetSimilarMv(id)
}
</script>

<style scoped lang="less">
.mv {
  position: fixed;
  width: 7.5rem;

  .video {
    width: 7.5rem;

    // height: 2rem;
    video {
      width: 7.5rem;
      // height: 4.2rem;
      // border-radius: 10px;

    }


  }
}

.mv-top {
  display: flex;
  align-items: center;
  font-size: 0.4rem;
  margin: 0.1rem 0.3rem;
  height: 0.4rem;


  .title {
    width: 100%;
    text-align: center;
    margin-right: 0.3rem;
    font-size: 0.3rem;
  }
}

.content {
  display: flex;
  align-items: center;
  padding-bottom: 0.2rem;
  margin-top: 0.1rem;

  // justify-content: space-around;
  div {
    width: 0.9rem;
    font-size: 0.33rem;
    margin-left: 0.2rem;

  }

  .pmd {
    // margin-left: 1.46rem;
    margin-right: 0.01rem;
    width: 3rem;

    svg {
      font-size: 0.2rem;
    }
  }
}

.info {
  padding: 0.3rem 0.3rem;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .songname {
      font-size: 0.33rem;
      font-weight: 700;
    }

    svg {
      font-size: 0.16rem;

    }


  }

  .jieshao {
    margin: 0.3rem 0;
    line-height: 0.5rem;
  }
}

.nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  // font-size: 0.5rem;
  color: gray;

  div {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 0.8rem;
    // background-color: red;

    .num {

      position: absolute;
      top: 0.5rem
    }
  }

  .shoucang {
    // font-size: 0.4rem;
    color: gray;

  }

  .comment {
    // font-size: 0.39rem;
  }

  .share {
    svg {
      font-size: 0.38rem;
    }

    // font-size: 0.38rem;
  }
}

.similarMvs {
  margin: 0.3rem;
  height: 50vh;
  overflow: scroll;
  padding-bottom: 2rem;
  // margin-bottom: 2.2rem;

  .item {
    display: flex;
    align-items: center;
    margin-bottom: 0.2rem;

    img {
      height: 1rem;
      border-radius: 2px;
    }

    .info {
      font-size: 0.2rem;
      color: gray;

      .title {
        font-weight: 700;
        font-size: 0.33rem;
        color: black;
      }
    }
  }
}

.pl {
  margin-right: 2rem;
}


.right {
  // margin: 0.3rem;

  .list {
    margin: 0.2rem;
    height: 50vh;
    overflow: scroll;
    padding-bottom: 1rem;

    .item {
      display: flex;
      padding-bottom: 0.2rem;


      img {
        margin-right: 0.3rem;
        width: 0.7rem;
        height: 0.7rem;
        border-radius: 50%;

      }

      .item-right {
        flex: 1;
        border-bottom: 0.01px solid #ccc;

        .name {
          font-weight: 800;
        }

        .time {
          color: gray;
          font-size: 0.2rem;
        }
      }

    }
  }
}

.comment {

  margin: 0.2rem 0.3rem;
  font-weight: 700;
}


.topdiv {
  text-align: center;
  padding-bottom: 0.1rem;
  font-weight: 500;
  // padding: 0 0.3rem;
}

.active {
  border-bottom: 2px solid rgb(218, 83, 83);
  // font-weight: 600;
  font-weight: bold;
  text-align: center;
}
</style>
 